<template>
	<view class="car-cycle">
<!-- 		<view class="car-cycle-title f-side" v-bind:style="{ backgroundImage:'linear-gradient(to right , #'+item.color1 +', #'+item.color2+', #'+item.color3+')'  }"> 
		   <view class="flex">
				 <view class="zcOverflow3">{{item.Class3}}</view>
				 <view class="text-one f-center">{{item.CreateType.slice(0,1)}}</view>
				 <image class="add-image" src="../../static/l1.png" mode="" v-if="item.UpFiles.length>0"></image>
			 </view>
			 <view class="flex" >
			 		<view @tap="addNewCycle(item,'edit')" class="iconfont icon-bianji" ></view>
			 		<view v-if="item.ComeType=='人工'" @tap="addNewCycle(item,'delete')" class="iconfont icon-deleteCycle  f-center" ></view>
			 </view>
		</view> -->
		<view class="car-cycle-title f-side" v-bind:style="{ borderTop:'10rpx solid #'+ item.color1,'color':'#333','borderBottom':'1rpx solid #e5e5e5'}"> 
		   <view class="flex itemCenter" >
				 <!-- <view class="cercle " :style="{background:'#'+item.color1}"></view> -->
				 <view class="zcOverflow3">{{item.Class3}}</view>
				 <view class="text-one f-center">{{item.CreateType.slice(0,1)}}</view>
				 <image class="add-image" src="../../static/l1.png" mode="" v-if="item.UpFiles.length>0"></image>
			 </view>
			 <view class="flex" >
			 		<view @tap="addNewCycle(item,'edit')" class="iconfont icon-bianji" ></view>
			 		<view v-if="item.ComeType=='人工'" @tap="addNewCycle(item,'delete')" class="iconfont icon-deleteCycle  f-center" ></view>
			 </view>
		</view>
		<view class="f-side">
				<view>最近消费：{{item.LastDate}}</view>
		    <view>最近到期：{{item.ExpireDate}}</view>
		</view>

	</view>
</template>

<script>
	let _this;
	export default{
		props:{
			isVisit:{
				type:Boolean,
				default:false
			},
			item:Object,
			canSelect:{
				type:Boolean,
				default:true
			}
		},
		created(){
			_this = this;
		},
		methods:{
			addNewCycle(item,type){
				this.$emit("addNewCycle",item,type)
			}
		}
	}
</script>

<style>
.car-cycle{
				margin: 0 35upx 25upx 35upx;
				background-color: #fff;
				border-radius: 20upx;
				box-shadow: 1upx 1upx 5upx 4upx #EAEDF1;
				padding-bottom: 20upx;
				overflow: hidden;
			}
.car-cycle>view{
				color: #9B9B9B ;
				height: 50upx;
				line-height: 50upx;
				font-size: 28upx;
				padding: 0 20upx;
			}
.car-cycle>.car-cycle-title{
				height: 80upx;
				line-height: 80upx;
				color: #333;
				margin-bottom: 10upx;
				
			}
.icon-bianji{
	font-size: 32upx;
	color: #333;
}
.icon-deleteCycle{
	font-size: 32upx;
	margin-left: 30upx;
		color: #333;
}
.zcOverflow3{
	max-width: 320upx;
}
.text-one{
	margin: 6upx 15upx 0 15upx;
	width: 30upx;
	height: 30upx;
	border-radius: 10upx;
	border: 1upx solid;
	font-size: 22upx;
}
.add-image{
	width: 40upx;
	height: 40upx;
	position: relative;
	top:2upx
}
.cercle{
	width: 32upx;
	height: 32upx;
	border-radius: 50%;
	margin-right: 20upx;
	position: relative;
	top:3upx
}
</style>
